<template>
  <div class="checkbox-list-wrapper">
    <div
      v-for="(item, idx) in data"
      :key="idx"
      class="item"
      :class="itemClass">
      <div class="label" @click="selectItem(item, idx)">{{getItemText(item)}}</div>
      <div class="checkbox-wrappper" :style="{'width': itemSize, 'height': itemSize}">
        <Checkbox ref="checkboxes" :checkedValue="getItemValue(item)" :data="item" @change="onChange" @beforeChange="onBeforeChange"></Checkbox>
      </div>
    </div>
  </div>
</template>

<script>
import Checkbox from '../checkbox'

export default {
  components: {
    Checkbox
  },
  props: {
    value: {
      type: Object | Array | String,
      default: null
    },
    data: {
      type: Array,
      default: null
    },
    mutiple: {
      type: Boolean,
      default: false
    },
    itemClass: {
      type: Object | String | Array
    },
    valueField: {
      type: String,
      default: null
    },
    textField: {
      type: String,
      default: null
    },
    itemSize: {
      type: String,
      default: '24px'
    }
  },
  data() {
    return {
      values: [],
      updateTag: false
    }
  },
  methods: {
    selectItem(item, idx) {
      var checkbox = this.$refs.checkboxes[idx]
      checkbox && checkbox.toggleCheck()
    },
    onBeforeChange(param) {
      if (!this.mutiple) {
        this.$refs.checkboxes.forEach(item => {
          item !== param.sender && item.setStatus(false)
        })
      }
    },
    getItemValue(item) {
      return this.valueField ? item[this.valueField] : item
    },
    getItemText(item) {
      return this.textField ? item[this.textField] : item.toString()
    },
    getCheckedValues() {
      var values = []
      this.$refs.checkboxes.forEach(chk => {
        if (chk.checked) {
          values.push(chk.getValue())
        }
      })
      return this.value === null || this.value.IsArray ? values : values.join(',')
    },
    onChange(param) {
      var values = this.getCheckedValues()
      this.updateTag = true
      this.$emit('input', values)
      this.$emit('change', this, values)
    }
  },
  watch: {
    values() {
      var values = this.getCheckedValues()
      this.updateTag = true
      this.$emit('input', values)
    },
    value(newVal) {
      if (this.updateTag) {
        this.updateTag = false
        return
      }
      if (newVal === null || newVal === undefined) {
        newVal = []
      }
      if (!newVal.IsArray) {
        newVal = newVal.toString().split(',')
      }
      var newValObj = newVal.toObject()
      this.$refs.checkboxes.forEach(chk => {
        var checkedValue = chk.checkedValue
        chk.setStatus(!!newValObj[checkedValue])
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.checkbox-list-wrapper {
  width: 100%;
  .item {
    width: 100%;
    display: flex;
    align-items: stretch;

    .label {
      display: flex;
      flex-grow: 1;
      align-items: center;
    }

    + .item {
      margin-top: 15px;
    }
  }
}
</style>
